import React from 'react'
import style from './style.module.scss'
import { Grid } from 'antd-mobile'
import {useNavigate} from 'react-router-dom'
export default function HotHouse(props) {
    const navigate = useNavigate();
    //跳转界面的方法--------------------
    function tiao(id){
        console.log('id----',id);
        navigate('/detail/'+id)
    }
  return (
    <>
        {
            props.list.map((ele,index)=>{
                return <div className={style.box} key={index} onClick={tiao.bind(null,ele.id)}>
                            <img src={ele.imgUrl} alt="" />
                            <div className={style.wrapper}>
                                    <Grid columns={3}>
                                        <Grid.Item span={2}>
                                        <div className={style.info}>
                                            <div>{ele.address}</div>
                                            <p> 
                                                {
                                                    ele.floor?<span>楼层：{ele.floor}</span>:''
                                                }
                                                {ele.huxing} - <span>{ele.area}㎡</span></p>
                                        </div>
                                        </Grid.Item>
                                        <Grid.Item>
                                        <div className={style.type}>{ele.type}</div>
                                        <p className={style.price}>{ele.price}/月</p>
                                        </Grid.Item>
                                    </Grid>
                            </div>
                        </div>
            })
        }
    </>
  )
}
